<template>
  <div>
    <v-chart :options="polar" autoresize />
  </div>
</template>

<script>
// import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import v from './v'

export default {
  components: {
    // 'v-chart': ECharts,
  },
  created() {
    // function randomData() {
    //   now = new Date(+now + oneDay)
    //   value = value + Math.random() * 21 - 10
    //   return {
    //     name: now.toString(),
    //     value: [
    //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
    //       Math.round(value),
    //     ],
    //   }
    // }

    // var data = []
    // var now = +new Date(1997, 9, 3)
    // var oneDay = 24 * 3600 * 1000
    // var value = Math.random() * 1000
    // for (var i = 0; i < 1000; i++) {
    //   data.push(randomData())
    // }

    let data = []
    for (const time of v.data) {
      data.push({
        name: time.timestamp,
        value: [
          time.timestamp, 
          parseFloat((time.uploadspeed / 1000).toFixed(2))
        ],
      })
    }

    this.polar.series[0].data = data
  },
  mounted() {
    // console.log(v.code)
    console.log('monuted')
  },
  data() {
    return {
      polar: {
        title: {
          text: '动态数据 + 时间坐标轴',
        },
        colors: ['#5793f3', '#d14a61', '#675bba'],
        // tooltip: {
        //   trigger: 'axis',
        //   formatter: function(params) {
        //     params = params[0]
        //     // var date = new Date(params.name)
        //     return (

        //       params.value[1]
        //     )
        //   },
        //   axisPointer: {
        //     animation: false,
        //   },
        // },
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          type: 'time',
          splitLine: {
            // show: false,
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          splitLine: {
            // show: false,
          },
        },
        series: [
          {
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            // hoverAnimation: false,
            data: [],
          },
        ],
      },
    }
  },
}
</script>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>
